<template>
	<view>
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="picker_root">
				<view class="picker_header">
					<text class="left_text" @click="close" :style="{ color: leftTextColor }">{{ leftText }}</text>
					<text class="title">{{ title }}</text>
					<text class="right_text" @click="affirm" :style="{ color: rightTextColor }">{{ rightText }}</text>
				</view>
				<template v-if="years.length > 0">
					<view class="picker_main">
						<picker-view
							:indicator-style="indicatorStyle"
							:value="value"
							@change="bindChange"
							class="picker_view"
						>
							<picker-view-column>
								<view class="picker_item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker_item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
							</picker-view-column>
							<picker-view-column v-if="show">
								<view class="picker_item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
							</picker-view-column>
						</picker-view>
					</view>
				</template>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'pddDatePicker',
	props: {
		defaultDate: {
			type: Array,
			default: [],
		},
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '请选择日期',
		},
		limit: {
			type: Number,
			default: 50,
		},
		leftText: {
			type: String,
			default: '取消',
		},
		leftTextColor: {
			type: String,
			default: '#4E5969',
		},
		rightText: {
			type: String,
			default: '确认',
		},
		rightTextColor: {
			type: String,
			default: '#1677FF',
		},
		startYear: {
			type: Number,
			default: 1970,
		}
	},
	data() {
		// 当前时间
		const nowDate = new Date()
		const nowYear = nowDate.getFullYear()
		// 年数组
		const years = []
		const year = nowYear
		for (let i = this.startYear; i <= nowYear + this.limit; i++) {
			years.push(i)
		}
		// 月数组
		const months = []
		const month = nowDate.getMonth() + 1
		for (let i = 1; i <= 12; i++) {
			months.push(i)
		}
		// 日数组
		const days = []
		const day = nowDate.getDate()
		for (let i = 1; i <= 31; i++) {
			days.push(i)
		}
		// 默认日期为今天 按索引来算
		let defaultDate = []
		if (this.defaultDate.length === 0) {
			defaultDate = [nowYear - this.startYear, month - 1, day - 1]
		}
		return {
			years,
			year,
			months,
			month,
			days,
			day,
			value: defaultDate,
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 80))}px;`,
		}
	},
	methods: {
		/**
		 * @description 打开
		 */
		open() {
			this.$refs.popup.open()
		},
		/**
		 * @description 关闭
		 */
		close() {
			this.$refs.popup.close()
		},
		/**
		 * @description 确认
		 */
		affirm() {
			const month = this.month < 10 ? '0' + this.month : this.month
			if (this.show) {
				const day = this.day < 10 ? '0' + this.day : this.day
				const date = `${this.year}-${month}-${day}`
				this.$emit('change', date)
				this.$refs.popup.close()
			} else {
				const date = `${this.year}-${month}`
				this.$emit('change', date)
				this.$refs.popup.close()
			}
		},
		/**
		 * @description 日期变化回调
		 */
		bindChange(e) {
			const value = e.detail.value
			// 赋值年数据
			this.year = this.years[value[0]]
			// 赋值月数据
			this.month = this.months[value[1]]
			// 计算日数据
			const date = new Date(this.year, this.month, 0)
			const leng = date.getDate()
			const arr = []
			for (let i = 1; i <= leng; i++) {
				arr.push(i)
			}
			this.days = arr
			this.day = this.days[value[2]]
		},
	},
}
</script>

<style scoped>
view {
	box-sizing: border-box;
}

.picker_root {
	width: 100%;
	height: 680rpx;
	background-color: #ffffff;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	position: relative;
}

.picker_main {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	bottom: 0;
}

.picker_view {
	width: 100%;
	height: 584rpx;
}

.picker_item {
	line-height: 80rpx;
	text-align: center;
}

.picker_header {
	width: 100%;
	height: 96rpx;
	padding: 0rpx 44rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #f2f3f5;
}

.title {
	color: #1d2129;
	font-size: 32rpx;
	font-weight: bold;
}

.left_text {
	font-size: 32rpx;
}

.right_text {
	font-size: 32rpx;
}
</style>
